//用户名+密码 注册
import React, { useState } from "react";
import Navbar from "../../components/navbar";
import styles from "./css/reg.module.css";
import { Form, Input, Button, Toast } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { getReg } from "../../api/info";
import { useNavigate } from "react-router-dom";
// import { useCountDown } from "../../hooks";

function Reg() {
  // //倒计时
  // let { count, start, isDown } = useCountDown(10);

  //创建表单的引用对象 默认值为空 没意义
  let [formPass] = Form.useForm();
  //小眼睛
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);

  let nav = useNavigate();
  //提交表单数据 触发注册接口函数
  const onFinish = async (values) => {
    console.log(values);
    await getReg(values);

    Toast.show({
      icon: "success",
      content: "注册成功！",
    });
  };
  return (
    <div className={styles.box}>
      <Navbar title="注册账号" />
      <Form
        form={formPass}
        layout="horizontal"
        mode="card"
        onFinish={onFinish}
        footer={
          <div>
            <Button block type="submit" color="primary">
              注册
            </Button>
            <Button
              block
              type="button"
              color="warning"
              onClick={() => nav("/login")}
              style={{ marginTop: "10px" }}
            >
              登录
            </Button>
          </div>
        }
      >
        <Form.Item
          label="账号"
          name="username"
          rules={[
            { required: true, message: "账号不能为空" },
            {
              pattern: /^(?!\d+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,15}$/,
              message: "账号为6-15的字母数字",
            },
          ]}
        >
          <Input placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
          rules={[
            { required: true, message: "密码不能为空" },
            {
              pattern: /^(?!\d+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,15}$/,
              message: "密码为6-15的字母数字",
            },
          ]}
        >
          <Input
            placeholder="请输入密码"
            type={visible ? "text" : "password"}
          />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="repassword"
          //校验确认密码框
          dependencies={["password"]}
          //只触发一个错误校验
          validateFirst
          //小眼睛
          extra={
            <div>
              {!visible2 ? (
                <EyeInvisibleOutline onClick={() => setVisible2(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible2(false)} />
              )}
            </div>
          }
          rules={[
            { required: true, message: "确认密码不能为空" },
            {
              pattern: /^(?!\d+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,15}$/,
              message: "密码为6-15的字母数字",
            },
            //自定义校验 函数
            {
              validator(_, p2) {
                const p1 = formPass.getFieldValue("password");
                if (p1 === p2) {
                  return Promise.resolve();
                } else {
                  return Promise.reject();
                }
              },
              message: "两次密码不一致！",
            },
          ]}
        >
          <Input
            placeholder="请再次确认密码"
            type={visible2 ? "text" : "password"}
          />
        </Form.Item>
      </Form>
      {/* <Button block color="primary" onClick={() => start()} disabled={isDown}>
        获取验证码---{count}
      </Button> */}
    </div>
  );
}

export default Reg;
